<script setup>
import { ref, computed } from "vue";

const text = ref("");
const text1 = ref("");

const priority = ref("High");
const testLabel = ref("label");
const checked = ref(true);
const labeltext = computed(() => {
  // 使用computed创建计算属性
  return checked.value ? "选中" : "未选中";
});

function warn(message, event) {
  if (event) {
    event.preventDefault();
  }
  alert(message);
}
</script>


<template>
  <button @click="(event) => warn('Warning, haha', event)">Button</button>
  <br />
  <input type="checkbox" id="checkbox" v-model="checked" />
  <label for="checkbox">{{ labeltext }}</label>
  <p>Message is: {{ text1 }}</p>
  <input v-model="text1" type="text" placeholder="Please tpye here" />
  <br />
  <br />
  <input v-model="text" type="text" placeholder="Please type here" />
  <br />
  <p>{{ text }}</p>
  <br />
  <br />
  <br />
  Priority:
  <br />
  <label :class="testLabel"
    ><input v-model="priority" type="radio" value="Low" />Low</label
  >
  <label :class="testLabel"
    ><input v-model="priority" type="radio" value="High" />High</label
  >
  <br />
  <p>{{ priority }}</p>
</template>

<style scoped>
.label {
  color: red;
}
</style>